<template>
  <div class="chat-user-card">
    <div class="mask" @click="handleEventClose"></div>
    <div class="content" v-loading="loading" :style="{
        left: positionNew.left,
        top: positionNew.top,
        bottom: positionNew.bottom
    }">
      <el-icon class="close-icon" @click="handleEventClose">
        <ele-Close/>
      </el-icon>
      <div class="info">
        <el-image class="avatar" :src="userInfo.avatar"/>
        <div class="in color-info">
          <p class="font-14" style="color: #1f1f1f">{{ userInfo.name  }}</p>
          <p class="font-12">群昵称：{{ userInfo?.groupNickname == '' ? userInfo.name : userInfo?.groupNickname }}</p>
          <p class="font-12">UID: {{ userInfo.uid  }}</p>
          <p class="font-12">地区：{{ userInfo.lastLocation == null ? '-' : userInfo.lastLocation}}</p>
        </div>
      </div>

      <div class="cus-divider"></div>

      <div class="remark">
        <span class="color-info">备注</span>
        <span>漳卅</span>
      </div>
      <div class="remark">
        <span class="color-info">来源</span>
        <span>账号搜索</span>
      </div>
      <div class="cus-divider"></div>
      <div class="send color-primary">
        发消息
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, nextTick, onBeforeMount, reactive, toRefs} from 'vue';
import {getUserDetail} from "/@/api/imapi";

export default defineComponent({
  name: 'ChatUserCard',
  props: {
    uid: {
      type: String,
      default: () => ''
    },
    groupId: {
      type: String,
      default: () => ''
    },
    position: {
      type: Object,
      default: () => {
        return {
          top: "0px",
          left: "0px",
          bottom: ''
        }
      }
    },
  },
  setup(props, {emit}) {
    const state = reactive({
      loading: true,
      positionNew: props.position,
      userInfo: {}
    });
    onBeforeMount(() => {
      getUserInfo();
      nextTick(() => {
        const screenWidth = window.innerWidth;
        const screenHeight = window.innerHeight;
        let _left = parseInt(props.position.left);
        let _top = parseInt(props.position.top);
        if (screenWidth - _left < 260) {
          state.positionNew.left = screenWidth - 270 + "px";
        } else {
          state.positionNew.left += 'px';
        }
        if (screenHeight - _top < 380) {
          state.positionNew.top = "";
          state.positionNew.bottom = "5px";
        } else {
          state.positionNew.top += "px";
        }
      })
    });
    const getUserInfo = () => {
      state.loading = true
      getUserDetail({uid: props.uid, groupId: props.groupId}).then(res => {
        state.userInfo = res.data
        state.loading = false
      })
    };
    const handleEventClose = () => {
      emit('handleClose', {})
    };
    return {
      ...toRefs(state),
      handleEventClose
    };
  },
});
</script>


<style scoped lang="scss">
.chat-user-card {
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: 2002;
  top: 0;
  left: 0;


  .mask {
    width: 100vw;
    height: 100vh;
    background-color: transparent;
    position: absolute;
    z-index: 555;
  }

  .content {
    position: absolute;
    width: 260px;
    height: auto;
    background-color: #ffffff;
    box-shadow: var(--el-box-shadow-dark);
    padding: 20px;
    border-radius: 6px;
    z-index: 2005;

    .close-icon {
      position: absolute;
      right: 10px;
      top: 10px;
    }

    .info {
      width: 100%;
      display: flex;
      align-items: flex-start;
      flex-direction: row;

      .avatar {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        margin-right: 10px;
      }

      .in {
        width: calc(100% - 70px);
        p {
          width: 100%;
          padding-bottom: 3px;
          white-space: nowrap; /* 防止文本换行 */
          overflow: hidden; /* 隐藏溢出的内容 */
          text-overflow: ellipsis; /* 显示省略号 */
        }

        p:last-child {
          padding-bottom: 0;
        }
      }
    }

    .remark {
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: space-between;
    }

    .send {
      text-align: center;
      cursor: pointer;
    }
  }

  .cus-divider {
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid #EFEFEF;
  }
}
</style>
